@media screen and (min-width:800px){
    .nav ul {
        display: inline;
        display: flex !important;
        align-items: flex-start;
    }
    .nav li{
        width: 200px;
    }
  
    .nav a {
        height: 210px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: rgb(213, 212, 212);
        transition: all 0.3s ease-in-out 0s;
        
    }
    .nav a .icon{
        margin-bottom: 2px;
        background-color:rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        
    }
   
    .nav a .icon img{
       align-self: center;
       margin: 0 auto;
    }
    .nav a:hover{
        height: 240px ;
        color: white;

    }
   
    
    .nav a:hover span{
        
        line-height: 200px;
    }
    .nav a:hover>.text{
        margin-bottom: -80px;
    }
    .nav a:hover>.icon{
        
        animation:aaa 0.5s
    }
   

    @keyframes aaa {
        0%{
            width: 40px;
            height: 40px;

        }
        50%{
            width: 80px;
            height: 80px;
        }
        100%{
            width: 40px;
            height: 40px;
        }
    }
    #imgLogo{
        display: none;
    }
}


@media screen and (min-width:520px) and (max-width:799px){
    .nav ul {
        display: inline;
        width: 100%;
        display: flex !important;
        
        flex-wrap: wrap;
    }
    .nav li{
        width: 50%;
        height: 100px;
    }
    .nav a{
        display: flex;
        height: 100px;
        color: rgb(213, 212, 212);
        
        
    }

    .nav a .icon{
        margin-bottom: 2px;
        background-color:rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        margin: 10px 0 0 10px;
        
        
    }
    .nav li a:hover{
        background-color:rgba(255, 255, 255, 0.3);
        color: white;
    }
    .nav li a:hover>.icon{
        border: 3px rgba(255, 255, 255, 0.3) solid;
    }
    .nav a .icon img{
        align-self: center;
        margin: 0 auto;
        width: 27px;
        height: 27px;
        
    }
    .text{
        margin: 50px 0px 0 100px;
    }
    #imgLogo{
        display: none;
    }

}

@media screen and (max-width:519px){
    .nav ul {
        display: none ;
    }
    .nav li span {
        display: block;
        margin-top: 20px;
        margin-left: 20px;
    }
    .nav a {
        display:flex;
        height: 70px;
        color: rgb(213, 212, 212);
        text-decoration: none;
        
    }
    .text{
        margin-left: 80px !important;
    }
    .nav li a:hover{
        background-color:rgba(255, 255, 255, 0.3);
        color: white;
    }
  
   
}